<template>
  <div class="avue-form-design">
    <el-container>
      <el-aside :width="leftAsideWidth" class="mylic">
        <!-- 左侧字段区 -->
        <afd-field
            :include-fields="includeFields"
            :custom-fields="includeFields"
            @field-click="handleFieldClick"
        ></afd-field>

        <div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>组件</span>
            </div>

            <el-tag
                class="el-tag-line"
                v-for="tag in option.column"
                :key="tag.prop"
                closable
                @click="handleClick(tag)"
                @close="handleClose(tag)">
              {{tag.label}}
            </el-tag>


          </el-card>
        </div>
      </el-aside>
      <el-container direction="vertical" style="text-align: center">
        <!-- 头部工具栏 -->
         <div>
           <el-button @click="handleSave">保存</el-button>
           <el-button @click="handleLicenseFile" type="success">下载图片</el-button>
<!--           <el-button @click="handleLicenseSend"-->
<!--                      type="primary">获取文件流</el-button>-->
<!--           <el-button @click="handleLicenseBase64"-->
<!--                      type="danger">获取bas64</el-button>-->
         </div>
        <!-- 主设计区 -->
        <div >
          <avue-license ref="license"
                        :option="optionLicense">
          </avue-license>
        </div>
      </el-container>
      <el-aside :width="rightAsideWidth">
        <!-- 右侧设计区 -->
        <div class="config" style="text-align: left;margin-top: 20px;margin-right: 20px">
          <el-form
              label-suffix="："
              labelPosition="right"
              labelWidth="150px"
          >
          <el-form-item label="背景图片" >
            <el-input v-model="option.imgUrl" placeholder="背景图片" @change="changeItemImg(option)" clearable></el-input>
          </el-form-item>
          <el-divider content-position="left">组件属性</el-divider>
          <div class="widget-config" v-if="widgetSelect.prop">
              <el-form-item label="标题">
                <el-input v-model="widgetSelect.label" clearable placeholder="标题" ></el-input>
              </el-form-item>
              <el-form-item label="内容"  v-if="widgetSelect.type == 'input'">
                <el-input v-model="widgetSelect.text" clearable placeholder="内容" ></el-input>
              </el-form-item>

            <el-form-item label="是否显示">
              <el-switch v-model="widgetSelect.display"></el-switch>
            </el-form-item>
            <el-form-item label="动态数据" v-if="widgetSelect.type == 'input'">
              <el-switch v-model="widgetSelect.dynamic"></el-switch>
            </el-form-item>
            <el-form-item label="唯一" v-if="widgetSelect.type == 'input'">
              <el-switch v-model="widgetSelect.onlyOne"></el-switch>
            </el-form-item>
              <el-form-item label="图片地址"  v-if="widgetSelect.type == 'img'">
               <el-input v-model="widgetSelect.imgUrl" clearable placeholder="图片地址" @change="changeItemImg(widgetSelect)"></el-input>
               </el-form-item>
               <el-form-item label="宽度"  v-if="widgetSelect.type == 'img'">
                 <el-input-number v-model="widgetSelect.width" clearable placeholder="图片宽度" ></el-input-number>
               </el-form-item>

              <el-form-item label="X">
                <el-input-number v-model="widgetSelect.left" clearable placeholder="X" ></el-input-number>
              </el-form-item>
              <el-form-item label="Y">
                <el-input-number v-model="widgetSelect.top" clearable placeholder="Y" ></el-input-number>
              </el-form-item>
              <el-form-item label="颜色"  v-if="widgetSelect.type == 'input'">
                <el-color-picker v-model="widgetSelect.color"></el-color-picker>
              </el-form-item>
              <el-form-item label="大小"  v-if="widgetSelect.type == 'input'">
                <el-input-number v-model="widgetSelect.size" clearable placeholder="字体大小" ></el-input-number>
              </el-form-item>
              <el-form-item label="是否加粗" v-if="widgetSelect.type == 'input'">
                <el-switch v-model="widgetSelect.bold"></el-switch>
              </el-form-item>
              <el-form-item label="样式" v-if="widgetSelect.type == 'input'">
                <el-input v-model="widgetSelect.style" clearable placeholder="样式" ></el-input>
              </el-form-item>

          </div>
          </el-form>
        </div>

      </el-aside>
    </el-container>


  </div>
</template>

<script>

import AfdField from "~/packages/components/field/index.vue";
import { convertHtmlByParam,loadPdfScript} from '@/framework-core/utils/util'
import { downFile,deepClone } from '@smallwei/avue'
import {saveForm,getLicense} from "@/framework-code/api/license";
import {convertImageToBase64} from "./index";



export default {
  components: {AfdField},
  data() {
    return {
      form: {"name": "测试"},
      widgetSelect: {},
      leftAsideWidth: "200px",
      rightAsideWidth: "400px",
      formId: "",
      includeFields: [
        {
          type: 'input',
          label: '测试',
          icon: 'icon-textarea',
          span: 24,
          dynamic:true,
          display: true
        },
        {
          type: 'img',
          label: '图片',
          icon: 'icon-img',
          span: 12,
          dynamic:false,
          display: true,
        }
      ],
      option: {
        imgUrl: "http://file.aseyun.com/c41cbf47ddd74d20bf476ca12d38aa42.png", //
        list: []
      }
    }
  },
  computed: {
    optionLicense() {
      if(!this.option.column){
        return this.option
      }
      this.option.list = this.option.column.filter(item => item.display);
      return this.option
    }
  },
  created() {
    // loadPdfScript();
    this.formId = this.$route.query.formId;
    if (this.formId) {
      getLicense(this.formId).then(response => {
        if (response.data.data.data.modelJson) {
          this.option = JSON.parse(response.data.data.data.modelJson);
        } else {
          this.option.img = "";
          this.option.column = [];
        }
        this.changeItemImg(this.option);
        for (let indexl = 0; indexl < this.option.column.length; indexl++) {
          this.changeItemImg( this.option.column[indexl]);

        }
      })
    }
  },
  methods: {
    handleSave() {
      let datatemp = deepClone(this.option);
      delete datatemp.img
      delete datatemp.list

      if (datatemp.column && datatemp.column.length > 0) {
        for (let indexl = 0; indexl < datatemp.column.length; indexl++) {
          delete datatemp.column[indexl].img
        }
      }

      saveForm(datatemp, {
            id: this.formId
          }
      ).then(response => {
        if (response.data.success) {
          this.$message.success("保存成功")
        }
      }).catch(error => {
        this.$message.error(error.msg || error.message)
      })
    },

    // 左侧字段点击
    handleFieldClick(item) {
      let oitem = {};
      let labelNo = Math.floor(Math.random() * 100000)+ Math.floor(Math.random() * 1000)  + Math.floor(Math.random() * 10)+ 1;
      let labelStr = item.label + "" + labelNo;
      let eNum = 0;
      if (item.type === 'input') {
        eNum = this.option.column.filter(function (obj) {
          return obj.type === "input";
        }).length;
        let mytop = 50 + eNum * 50;
        let myleft = 100;
        if (mytop > 600) {
          myleft = 100 + (eNum / 10) * 100;
        }
        oitem = {
          left: myleft,
          top: mytop,
          text: labelStr,
          color: '#000',
          bold: true,
          size: 26,
          style: '黑体',
          dynamic:true,
        }
      } else if (item.type === 'img') {
        eNum = this.option.column.filter(function (obj) {
          return obj.type === "img";
        }).length;
        let mytop = 50 + eNum * 50;
        let myleft = 500;
        if (mytop > 600) {
          myleft = 500 - (eNum / 5) * 100;
        }
        oitem = {
          left: 500,
          top: mytop,
          width: 200,
          dynamic:false,
          imgUrl: 'http://file.aseyun.com/7300e5fae1874264bda9e9ec2df3a47e.png'
        }
      }
      oitem.type = item.type;
      oitem.prop = "p_" + labelNo;
      oitem.label = labelStr;
      oitem.display = true;
      this.option.column.push(oitem)
      this.widgetSelect = oitem;

      if (this.widgetSelect.type === "img") {
        this.changeItemImg(this.widgetSelect);
      }
    },

    changeItemImg(item) {
      item.img = "";
      if (item.imgUrl) {
        convertImageToBase64(item.imgUrl, function (base64Img, $columnTemp) {
          $columnTemp.img = base64Img
        }, item);
      }
    },

    handleClick(item) {
      this.widgetSelect = item;

    },
    handleClose(item) {
      this.option.column = this.option.column.filter(function (obj) {
        return obj.prop !== item.prop;
      });
    },
    handleLicenseSend() {
      this.$message.success('请查看控制台');
      this.$refs.license.getFile(this.form.name).then(file => {
        console.log(file);
      })
    },
    handleLicenseBase64() {
      this.$message.success('请查看控制台');
      this.$refs.license.getBase64().then(file => {
        console.log(file);
      });
    },
    handleLicenseFile() {
      this.$refs.license.getBase64(this.form.name).then(file => {
        downFile(file, new Date().getTime());
      })
    },
    handleLicenseUpload() {
      this.$refs.license.getPdf(this.form.name);
    }
  }
}
</script>
<style>
 .mylic .field{
   height: auto!important;
 }
 .el-tag-line {
   display: block;
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 14px !important;
   padding: 2px 9px;
 }

</style>


